<template>
  <div class="dialog">
    <el-dialog
      :visible.sync="dialogVisiable"
      width="30%"
      :title="$attrs['dialogTitle']"
      @change="closeDialog"
    >
      <Form v-bind="$attrs" ref="formRef"></Form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiable = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddParams">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Form from "./Form";
export default {
  name: "Dialog",
  inheritAttrs: false,
  // props: {
  //   dialogTitle: {
  //     type: String,
  //     default() {
  //       return ''
  //     }
  //   },

  // },
  data() {
    return {
      dialogVisiable: false
    };
  },
  methods: {
    confirmAddParams() {
      this.$emit("confirmAddParams");
    },
    closeDialog() {
      this.$refs.formRef.resetFields();
    }
  },

  components: {
    Form
  }
};
</script>

<style lang="scss" scoped></style>
